<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未闻花名 - 首页</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script>
</head>
<body>
<header>
    <div class="logo-title">
        <img src="logo.png" alt="网站Logo">
        <h1 style="font-family: 楷体;color:springgreen;font-size: 38px">未闻花名</h1>
    </div>
</header>
<div class="main-container">
    <div class="carousel">
        <img src="img_2.png" alt="图片1">
        <img src="img_1.png" alt="图片2">
        <img src="image.jpg" alt="图片3">
        <button class="prev">上一张</button>
        <button class="next">下一张</button>
    </div>
    <nav class="main-nav">
        <ul>
            <li><a href="1.html">首页</a></li>
            <li class="dropdown"><a href="jies.html">角色介绍</a>
            <!--    <ul class="dropdown-content">
                    <li><a href="#character1">角色1</a></li>
                    <li><a href="#character2">角色2</a></li>
                </ul>-->
            </li>
            <li><a href="shi.html">精彩片段</a></li>
            <li><a href="denglu.html">登录</a></li>

        </ul>
    </nav>
    <nav class="side-nav">
        <ul>
            <li><a href="#anime-introduction">动漫介绍</a></li>
            <li><a href="#characters-introduction">人物介绍</a></li>
            <li><a href="#recommended-episodes">推荐剧集</a></li>
            <li><a href="#audience-reviews">观众评价</a></li>
        </ul>
    </nav>
    <!-- 动漫介绍部分 -->
    <div id="anime-introduction" class="anime-introduction">
        <h2>关于《未闻花名》</h2>
        <p>《未闻花名》是一部感人至深的动漫，讲述了青梅竹马的六人组在多年后因故重聚，揭开了一个个感人的故事...</p>
    </div>

    <!-- 主要角色介绍部分 -->
    <div id="characters-introduction" class="characters-introduction">
        <h2>主要角色</h2>
        <div class="character" id="character1">
            <img src="img_4.png" alt="本间芽衣子" class="character-img">
            <h3>本间芽衣子 (めんま)</h3>
            <p>温柔善良的少女，曾在一次意外中去世，多年后以幽灵的形式出现在朋友们面前...</p>
        </div>
        <div class="character" id="character2">
            <img src="img_5.png" alt="宿海仁太" class="character-img">
            <h3>宿海仁太 (じんたん)</h3>
            <p>曾经是六人组的领袖，芽衣子去世后变得孤僻不愿与人交往...</p>
        </div>
        <!-- 继续添加其他角色 -->
    </div>

    <!-- 推荐剧集部分 -->
    <div id="recommended-episodes" class="recommended-episodes">
        <h2>推荐剧集</h2>
        <div class="episode">
            <img src="img.png" alt="剧集1" class="episode-img">
            <h3>第一集：我们仍未知道那天所看见的花的名字</h3>
            <p>剧集简介...</p>
        </div>
        <div class="episode">
            <img src="img.png" alt="剧集2" class="episode-img">
            <h3>第二集：剧集名称</h3>
            <p>剧集简介...</p>
        </div>
        <!-- 继续添加其他推荐剧集 -->
    </div>

    <!-- 观众评价部分 -->
    <div id="audience-reviews" class="audience-reviews">
        <h2>观众评价</h2>
        <div class="review">
            <p>"这部动漫真的感人至深，推荐给所有人！" - 小明</p>
            <p>评分：★★★★★</p>
        </div>
        <div class="review">
            <p>"每次看都会感动落泪。" - 小红</p>
            <p>评分：★★★★★</p>
        </div>
        <!-- 继续添加其他评价 -->
    </div>
</div>
<footer>
    <p>&copy; 2024 未闻花名. 妍.</p>
    <div class="social-media">
        <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
        <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
        <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
    </div>
</footer>
</body>
</html>

